<template>
  <div class="md-past">
    <div class="md-past-container">
      <div class="md-swiper-box">
        <md-swiper :swiperData="swiperInfo" />
      </div>
      <!-- 商品列表 -->
      <div class="md-goods">
        <md-goods-list :loading="infoLoading" :goodsInfo="productData" />
      </div>
      <div class="pages">
        <el-pagination :current-page="search.pageIndex" :page-size="search.pageSize" layout="total, prev, pager, next, jumper" :total="productTotal"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MdPastComponent',
  layout: 'dynamic',
  data () {
    return {
      swiperInfo: [
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') },
        { img: require('@/assets/img/dynamic/original.jpeg') }
      ],
      search: {
        title: '',
        category: '2', // 产品类型（1新品 2往期 3体验）
        pageIndex: 1,
        pageSize: 12
      },
      infoLoading: false,
      productData: [],
      productTotal: 0
    }
  },
  mounted () {
    this.getProductInfo()
  },
  methods: {
    async getProductInfo () {
      this.infoLoading = true
      const res = await this.$axios.post('web/product/listPage', this.search)
      this.infoLoading = false
      if (res.code == 200) {
        this.productData = res.data.items
        this.productTotal = res.data.totalItems
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.md-past {
  width: 100%;
  background-color: #F5F5F5;
  .md-swiper-box {
    width: 100%;
  }
}
.pages {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  ::v-deep .el-pagination {
    .el-pagination__total,
    .el-pagination__jump {
      font-size: 14px;
      color: #4e5969;

      .el-input {
        height: 32px;
        input {
          height: 32px;
        }
      }
    }

    .el-pager {
      .number {
        padding: 0px;
        width: 32px;
        min-width: auto;
        height: 32px;
        line-height: 32px;
        border: 1px solid #d3d3d3;
        border-radius: 4px;
        font-size: 14px;
        font-weight: normal;
        color: #4e5969;
        margin-right: 8px;
        &:last-child {
          margin-right: 0px;
        }
      }
    }

    .btn-prev,
    .btn-next {
      border: 1px solid #d3d3d3;
      border-radius: 4px;
      padding: 0px;
      width: 32px;
      min-width: auto;
      height: 32px;
    }

    .btn-prev {
      margin-right: 8px;
    }

    .btn-next {
      margin-left: 8px;
    }
  }
}
</style>
